import React, { Component } from "react";

// 定义一个高阶组件
// 本质是一个函数，传入一个组件，返回一个新组件
// 为了给组件添加功能(公共的html片段，公共的属性)
// 类似于vue的mixin
const hoc = (Comp) => {
  return class extends Component {
    render() {
      // console.log(this.props);
      return (
        <>
          {/* {...this.props}是将所有接收到的属性，原封不动的传递给子组件 */}
          <Comp str="hello" {...this.props} />
          <footer>@千锋教育</footer>
        </>
      );
    }
  };
};

@hoc
class App extends Component {
  render() {
    console.log(this.props);
    return (
      <>
        <h2>高阶组件</h2>
      </>
    );
  }
}

// const App2 = hoc(App);

// export default hoc(App);

export default App;
